<template>
	<div class="l_right contjoin">
		<div class="contjoin_view">
			<div class="contjoin_add" v-if="switchStatus" @click="autoContentAdd">新建</div>
			<div class="contjoin_header">
				<div v-if="switchStatus" class="contjoin_header_one contjoincolor"  @click="switchAccountMenu('one')">平台账号接入</div>
				<div v-else class="contjoin_header_one"  @click="switchAccountMenu('one')">平台账号接入</div>
				<div v-if="switchStatus" class="contjoin_header_two"  @click="switchAccountMenu('two')">接口接入</div>
				<div v-else class="contjoin_header_two contjoincolor"  @click="switchAccountMenu('two')">接口接入</div>
				<div class="contjoin_header_three">
					<span v-if="switchStatus" class="contjoin_header_one_line"></span>
					<span v-else class="contjoin_header_two_line"></span>
				</div>
				<!--平台账号接入-->
				<div v-if="switchStatus" class="contjoin_one">
					<!--平台账号接入的头部-->
					<div class="contjoin_one_header">
						<form action="" method="get">

							<div class="contjoin_one_header_one">
								<div class="contjoin_one_header_li">
									<span>发布平台：</span>
									<Select v-model="platformValue" style="width:140px;height: 30px;">
										<Option v-for="item in platformData" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</div>
								<div class="contjoin_one_header_li">
									<span>账号名称：</span>
									<input type="" v-model="accountName" name="siteNickName" class="Username-btn" value="">

								</div>
								<div class="contjoin_one_header_li">
									<span>自动确权：</span>
									<Select v-model="isAutoValue" style="width:140px;height: 30px;">
										<Option v-for="item in confirmRightStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</div>
							</div>
							<div class="contjoin_one_header_two">
								<div class=" contjoin_one_header_li contjoin_lilast" style="width: 305px;">
									<span>创建时间：</span>
									<DatePicker @on-change="handleChange"  :value="dateValue" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择日期区间" style="width: 220px"></DatePicker>
								</div>
								<div class="contjoin_soso" @click="searchListData">搜索</div>
								<div class="contjoin_removetext" @click="clearAllData">清空</div>

							</div>
						</form>
					</div>
					<!--平台账号接入内容-->
					<div class="contjoin_one_cont">
						<div class="contjoin_one_th">
							<ul>
								<li class="thli_1">序号</li>
								<li class="thli_2">平台类型</li>
								<li class="thli_3">平台名称</li>
								<li class="thli_4">账号名称</li>
								<li class="thli_5">自动确权</li>
								<li class="thli_6">创建时间</li>
								<li class="thli_7">操作</li>

							</ul>
						</div>
						<div class="contjoin_one_tdli" v-for="(item,index) in copyRightData.data.data">
							<div v-if="index%2 === 0"  class="contjoin_one_td bgc">
								<ul>
									<li class=" tdli_1">{{index+1}}</li>
									<li class="tdli_2">{{item.platformType == 1 ?"文章":item.platformType == 2 ?"音频" :item.platformType == 3 ?"视频" :"未定义"}}</li>
									<li class="tdli_3">{{item.platformCode == 1 ?"微信公众号" : item.platformCode == 2 ? "今日头条" : item.platformCode == 3 ? "喜马拉雅" : item.platformCode == 4 ? "网易云课堂" : item.platformCode == 5 ? "百度传课" : item.platformCode == 6 ? "腾讯课堂" : item.platformCode == 7 ? "其他" : "" }}</li>

									<li class="tdli_4">{{item.id == 1 ?item.siteAccount :item.siteNickName}}</li>
									<li v-if='item.platformType == 1 && item.isAuto == 1' class="tdli_5 ">是</li>
									<li v-else-if='item.platformType == 1 && item.isAuto == 0' class="tdli_5 tdli_red">否</li>
									<li v-else class="tdli_5 tdli_red">否</li>
									<li class="tdli_6">{{timestampToTime(item.insertTime)}}</li>
									<li class="tdli_7" id="item.id">
										<span class="xiu" style="color:#6699FF; cursor: pointer;" @click="editListData(item.id)">修改</span><span style="margin: 0 5px;">|</span><span class="remove" style="color:#E94747; cursor: pointer;" @click="removeListData(item.id)">删除</span>
									</li>
								</ul>
							</div>
							<div v-else  class="contjoin_one_td">
								<ul>
									<li class=" tdli_1">{{index+1}}</li>
									<li class="tdli_2">{{item.platformType == 1 ?"文章":arr[i].platformType == 2 ?"音频" :arr[i].platformType == 3 ?"视频" :"未定义"}}</li>
									<li class="tdli_3">{{item.platformCode == 1 ?"微信公众号" : item.platformCode == 2 ? "今日头条" : item.platformCode == 3 ? "喜马拉雅" : item.platformCode == 4 ? "网易云课堂" : item.platformCode == 5 ? "百度传课" : item.platformCode == 6 ? "腾讯课堂" : item.platformCode == 7 ? "其他" : "" }}</li>

									<li class="tdli_4">{{item.id == 1 ?item.siteAccount :item.siteNickName}}</li>
									<li v-if='item.platformType == 1 && item.isAuto == 1' class="tdli_5 ">是</li>
									<li v-else-if='item.platformType == 1 && item.isAuto == 0' class="tdli_5 tdli_red">否</li>
									<li v-else class="tdli_5 tdli_red">否</li>
									<li class="tdli_6">{{timestampToTime(item.insertTime)}}</li>
									<li class="tdli_7" id="item.id">
										<span class="xiu" style="color:#6699FF; cursor: pointer;" @click="editListData(item.id)">修改</span><span style="margin: 0 5px;">|</span><span class="remove" style="color:#E94747; cursor: pointer;" @click="removeListData(item.id)">删除</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!--分页-->
					<pagination style="margin-top: 27px;" :total="total" :current-page='current'  :fromType='fromType' @pagechange="pagechange"></pagination>
				</div>
				<!--接口接入-->
				<div v-else class="contjoin_two">
					<div class="contjoin_two_header"> 接口说明（具体对接请联系在线客服）</div>
					<div class="contjoin_two_text">
						<img class="img-doc" src="https://ent-service.oss-cn-qingdao.aliyuncs.com/saas_document/%E6%96%87%E6%A1%A31.Jpeg">
						<img class="img-doc" src="https://ent-service.oss-cn-qingdao.aliyuncs.com/saas_document/%E6%96%87%E6%A1%A32.Jpeg">
						<img class="img-doc" src="https://ent-service.oss-cn-qingdao.aliyuncs.com/saas_document/%E6%96%87%E6%A1%A33.Jpeg">
						<img class="img-doc" src="https://ent-service.oss-cn-qingdao.aliyuncs.com/saas_document/%E6%96%87%E6%A1%A34.Jpeg">
						<img class="img-doc" src="https://ent-service.oss-cn-qingdao.aliyuncs.com/saas_document/%E6%96%87%E6%A1%A35.Jpeg">
					</div>
				</div>
				<div class="contjoin_two_download" style="display: none;">
					<a class="contjoin_download" style="display: inline-block;color:#666666" href="https://ent-service.oss-cn-qingdao.aliyuncs.com/saas_document/saas%E9%B2%B8%E7%89%88%E6%9D%83%E4%BD%9C%E5%93%81%E6%8E%A5%E5%8F%A3%E6%8E%A5%E5%85%A5%E5%AF%B9%E6%8E%A5%E6%96%87%E6%A1%A320181031.pdf" download="saas%E9%B2%B8%E7%89%88%E6%9D%83%E4%BD%9C%E5%93%81%E6%8E%A5%E5%8F%A3%E6%8E%A5%E5%85%A5%E5%AF%B9%E6%8E%A5%E6%96%87%E6%A1%A320181031.pdf">
						<span>文档下载</span>
						<span></span>
					</a>

				</div>
			</div>
		</div>
		<Modal
			v-model="editStatus"
			title="接入详情"
			width='600px'
			ok-text="确定"
			id="contect_detail"
			@on-ok="confirmSubmit"
			@on-cancel="cancelSubmit"
			:loading="loading"
			cancel-text="取消">
			<div  class="popup-text">
				<div class="jie">
					<div class="jie_title">接入信息（接入信息不可修改，如有变更请删除重建）</div>
					<div class="jie_line"></div>
					<div class="jie_xinxi">
						<div>
							<span>平台类型：</span>
							<span class="platformType">视频发布平台</span>
						</div>
						<div>
							<span>平台名称：</span>
							<span class="platformCode">腾讯课堂</span>
						</div>
						<div>
							<span>账号标识：</span>
							<span class="siteHomepage">主页地址：httpllll</span>
						</div>
					</div>
					<div class="she_title">账号设置</div>
					<div class="jie_line"></div>
					<div class="she_cont">
						<div class="she_name">
							<span>账号名称：</span>
							<input type="text" name="siteNickName" class="siteNickName" value="" />
						</div>
						<div class="she_auto" >
							<span>确权设置：</span>
							<input type="radio" name="isAuto" class="isone auto" value="1" /><span>账号内容自动确权</span>
							<input type="radio" name="isAuto" class="istwo auto" value="0" /><span>账号内容不需确权</span>
						</div>

					</div>
					<!-- <div class="btn">
						<span class="btn_no">取消</span>
						<span class="btn_yes">确定</span>
					</div> -->
				</div>
			</div>
		</Modal>
		<Modal
			v-model="deleteStatus"
			title="提示"
			width='498px'
			ok-text="确定"
			id="contect_detail"
			@on-ok="deleteConfirmSubmit"
			@on-cancel="deleteCancelSubmit"
			:loading="deleteLoading"
			cancel-text="取消">
			<div  class="popup-text">
				<div class="jie">
					<div class="jie_title">是否确定删除选中内容？</div>
				</div>
			</div>
		</Modal>

	</div>
</template>

<script>
	import pagination from '../../common/pagination/pagination'
	export default {
		name: "copyRight",
		components: {
			pagination,
			
		},
		data() {
			return {
				// 分页页面区分来源
				fromType:'pagechange',
				loading:true,
				// 编辑
				editStatus:false,
				// 删除
				deleteStatus:false,
				deleteLoading:true,
				accountName:'',  //账号名称
				dateValue:'',  //日期
				platformData:[  //发布平台
					{
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '微信公众号'
                    },
                    {
                        value: '2',
                        label: '今日头条'
                    },
                    {
                        value: '3',
                        label: '喜马拉雅'
                    },
					{
						value: '4',
						label: '网易云课堂'
					},
					{
						value: '5',
						label: '百度传课'
					},
					{
						value: '6',
						label: '腾讯课堂'
					},
					{
						value: '7',
						label: '其他'
					},
				],
				platformValue:'0',
				confirmRightStatus:[ //自动确权
					{
						value: '2',
						label: '全部'
					},
					{
						value: '1',
						label: '是'
					},
					{
						value: '0',
						label: '否'
					}
				],
				isAutoValue:'2',
				//左侧菜单默认选中状态
				// isActive: 0,
				total: 40, // 记录总条数
				display: 10, // 每页显示条数
				current: 1, // 当前的页数
				//切换状态
				switchStatus:true,
				copyRightData:{
					"code":"0000",
					"data":{
						"count":11,
						"data":[
							{
								"id":242,
								"insertTime":1541546094000,
								"isAuto":0,
								"platformCode":6,
								"platformType":3,
								"siteHomepage":"http://ke.qq.com/course/224374",
								"siteNickName":"摄影的基础与技巧",
								"status":1
							},
							{
								"id":237,
								"insertTime":1541543793000,
								"isAuto":0,
								"platformCode":2,
								"platformType":1,
								"siteHomepage":"http://mp.toutiao.com/login/?redirect_",
								"siteNickName":"edirec",
								"status":1
							},
							{
								"id":236,
								"insertTime":1541543541000,
								"isAuto":1,
								"platformCode":2,
								"platformType":1,
								"siteHomepage":"http://www.toutiao.com/a66207701658123637",
								"siteNickName":"662077016",
								"status":1
							},
						],
						"pageNumber":1,
						"pageSize":10,
						"totalPage":0
					},
					"message":"操作成功！"
				}
			};
		},
		methods: {
			pagechange(currentPage) {
				console.log(currentPage);
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
			},
			// 新建
			autoContentAdd(){
				this.$router.push({  //核心语句
					path:'/automaticAdd',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
					  // id:this.id ,  
					}
				})
			},
			//切换菜单
			switchAccountMenu(value){
				console.log("切换菜单="+value);
				if(value === 'one'){
					this.switchStatus = true;
				}else{
					this.switchStatus = false;
				}
			},
			// 时间选择
			getDate(obj){
				console.log('obj='+JSON.stringify(obj))
			},
			//格式化时间戳
		  	timestampToTime(timestamp){
				timestamp = timestamp + ""
				if(timestamp.length == 10) {
					timestamp = timestamp - 0
					var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				}
				if(timestamp.length == 13) {
					timestamp = timestamp - 0
					var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				}
			
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
			// 搜索
			searchListData(){
				console.log("accountName="+this.accountName)
				console.log("dateValue="+this.dateValue)
				console.log("platformValue="+this.platformValue)
				console.log("isAutoValue="+this.isAutoValue)
			},
			// 清空
			clearAllData(){
				this.accountName = '';
				this.dateValue='';
				this.platformValue='0';
				this.isAutoValue='2';
			},
			// 改变时间
			handleChange(value){
				console.log("value1="+value);
				this.dateValue = value;
			},
			// 编辑数据
			editListData(data){
				console.log("data="+data);
				this.editStatus = true;
				
			},
			// 编辑接入详情确认
			confirmSubmit(){
				console.log('确定');
				setTimeout(() => {
                    this.$Modal.remove();
					this.editStatus = false
                }, 2000);
				
			},
			// 编辑接入详情取消
			cancelSubmit(){
				console.log('取消')
			},
			// 删除数据
			removeListData(itemId){
				console.log("itemId="+itemId);
				this.deleteStatus = true;
			},
			// 删除数据确认按钮
			deleteConfirmSubmit(){
				setTimeout(() => {
					this.$Modal.remove();
					this.deleteStatus = false
				}, 2000);
			},
			// 删除数据取消按钮
			deleteCancelSubmit(){
				console.log('shanchuquxiao')
			},
			
			
		},

		beforeMount: function() {
			// console.log("47")
		},
		mounted: function() {
			// console.log("7777777777")
		}
	};
</script>

<style scoped="scoped">
	@import 'automaticAccess.css'
</style>
